<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>携程旅行</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/media.css">
    <link rel="stylesheet" href="css/normalize.css">
</head>

<body>
    <!-- nav部分开始 -->
    <nav>
        <div class="nav-left">
            <a href="#">搜索：目的地/酒店/景点/航班号</a>
        </div>
        <div class="nav-right">
            <a href="#">我的</a>
        </div>
    </nav>
    <!-- nav部分结束 -->

    <!-- focus部分开始 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="" class="focus-img">
    </div>
    <!-- focus部分结束 -->

    <!-- section1 开始 -->
    <section>
        <ul class="section1">
            <li>
                <a href="#">
                    <span></span>
                    <span>吃喝玩乐</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span></span>
                    <span>吃喝玩乐</span>
                </a>
            </li>
            <li><a href="#">
                    <span></span>
                    <span>吃喝玩乐</span>
                </a></li>
            <li><a href="#">
                    <span></span>
                    <span>吃喝玩乐</span>
                </a></li>
            <li><a href="#">
                    <span></span>
                    <span>吃喝玩乐</span>
                </a></li>
    </section>

    <!-- section1 结束 -->

    <!-- section2开始 -->
    <section class="section2">
        <div class="section2-left">
            <span>酒店</span>
            <span></span>
        </div>
        <div class="section2-mid">
            <span>海外酒店</span>
            <span>特价酒店</span>
        </div>
        <div calss="section2-right">
            <span>团购</span>
            <span>民宿客栈</span>
        </div>
    </section>
    <section class="section2">
        <div class="section2-left">
            <span>酒店</span>
            <span></span>
        </div>
        <div class="section2-mid">
            <span>海外酒店</span>
            <span>特价酒店</span>
        </div>
        <div calss="section2-right">
            <span>团购</span>
            <span>民宿客栈</span>
        </div>
    </section>
    <section class="section2">
        <div class="section2-left">
            <span>酒店</span>
            <span></span>
        </div>
        <div class="section2-mid">
            <span>海外酒店</span>
            <span>特价酒店</span>
        </div>
        <div calss="section2-right">
            <span>团购</span>
            <span>民宿客栈</span>
        </div>
    </section>
    <!-- section2结束 -->

    <!-- section3开始 -->
    <section class="section3">
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>
        <div>
            <a href="#">wifi电话卡</a>
        </div>

    </section>

    <!-- section3结束 -->

    <!-- active部分开始 -->
    <section class="active">
        <div class="active-top">
            <span class="left"></span>
            <span class="mid">广告</span>
            <a href="" class="right">获取更多福利</a>
        </div>
        <div class="active-botton">
            <div class="active-bottom-top">
                <a href="#">
                    <img src="./upload/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./upload/pic2.jpg" alt="">
                </a>
            </div>
            <div class="active-bottom-mid">
                <a href="#">
                    <img src="./upload/pic3.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./upload/pic4.jpg" alt="">
                </a>
            </div>
            <div class="active-bottom-bottom">
                <a href="#">
                    <img src="./upload/pic5.jpg" alt="">
                </a>
                <a href="#">
                    <img src="./upload/pic6.jpg" alt="">
                </a>

            </div>
        </div>
    </section>

    <!-- active部分结束 -->

    <!-- footer部分开始 -->
    <footer>
        <div class="flex">
            <span></span>
            <span>电话预定</span>
        </div>
        <div class="flex">
            <span></span>
            <span>下载客户端</span>
        </div>
        <div class="flex">
            <span></span>
            <span>我的</span>
        </div>
    </footer>

    <!-- footer部分结束 -->



</body>

</html>